<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>部门管理</title>
    <script src="../js/vue/dist/vue.min.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/web-util.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-row {
            margin-bottom: 20px;
        }

        .el-tree {
            border: 1px solid #DCDFE6;
            margin-right: 5px;
        }

        .el-main {
            padding: 0;
        }

        body {
            height: 85%;
            margin: 10px;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container>
            <el-aside width="250px">
                <el-tree :data="deptTreeData" ref="deptTree" :props="treeProps" @node-click="handleNodeClick"
                         node-key="deptCode" :highlight-current="true"
                         :expand-on-click-node="false" default-expand-all></el-tree>
            </el-aside>
            <el-main>

                <el-tabs type="border-card">
                    <el-tab-pane label="下属部门">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="showDeptDialog" size="small">
                                    新增下属部门
                                </el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-table ref="tableData" v-loading="loading" :data="tableData"
                                          row-class-name="row_padding" header-row-class-name="head_padding"
                                          highlight-current-row border style="width: 100%">
                                    <el-table-column label="部门名称" prop="deptName" fixed="left" header-align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作人" prop="updateUser" header-align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作时间" prop="updateTime" align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="状态" prop="businessFlag" align="center">
                                        <template slot-scope="scope">
                                            <span v-html="showBusinessStatusImage(scope.row.businessFlag)"
                                                  @click="updateBusinessStatus(scope.row)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                        <template slot-scope="scope">
                                            <el-button @click.native.prevent="showEditDeptDialog(scope.row)" type="text"
                                                       size="small">
                                                编辑
                                            </el-button>
                                            <el-button @click.native.prevent="deleteDept(scope.row)" type="text"
                                                       size="small">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                        <el-dialog title="部门详情" :visible.sync="deptFormVisible" @close="handleDialogClose"
                                   width="600px">
                            <el-form ref="deptForm" :model="deptForm" :rules="deptFormRules" label-width="150px"
                                     label-position="right">
                                <el-form-item label="部门名称" prop="deptName" required>
                                    <el-input v-model="deptForm.deptName" placeholder="请输入部门名称" style="width: 300px"
                                              :maxlength="100" :disabled="formRead"></el-input>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="deptForm.remark" type="textarea" :rows="3"
                                              placeholder="请填写部门相关的描述" style="width: 300px" :maxlength="50"
                                              :disabled="formRead"></el-input>
                                </el-form-item>

                                <el-form-item label-width="0" style="text-align: center">
                                    <el-button type="primary" @click="saveDept()" size="small">保存</el-button>
                                </el-form-item>
                            </el-form>

                        </el-dialog>
                    </el-tab-pane>

                    <el-tab-pane label="部门用户">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="showUserDialog(null)" size="small">新增部门用户</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-table ref="userTableData" v-loading="loading" :data="userTableData"
                                          row-class-name="row_padding" header-row-class-name="head_padding"
                                          highlight-current-row border style="width: 100%">
                                    <el-table-column label="姓名" prop="nickName" header-align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="登录名" prop="loginName" fixed="left" header-align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="手机号" prop="telephone" align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="所属机构" prop="orgName" align="center"
                                                     show-overflow-tooltip></el-table-column>
                                    <el-table-column label="所属部门" prop="deptName" align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="状态" prop="businessFlag" align="center">
                                        <template slot-scope="scope">
                                            <span v-html="showBusinessStatusImage(scope.row.businessFlag)"
                                                  @click="updateUserBusinessStatus(scope.row)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                        <template slot-scope="scope">
                                            <el-button @click.native.prevent="showUserDialog(scope.row)" type="text"
                                                       size="small">
                                                编辑
                                            </el-button>
                                            <el-button @click.native.prevent="deleteUser(scope.row)" type="text"
                                                       size="small">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                        <div style="text-align: right;margin-top: 8px;">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="userQueryForm.current"
                                    :page-sizes="[2, 10, 50, 100]"
                                    :page-size="userQueryForm.size"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="userQueryForm.total">
                            </el-pagination>
                        </div>

                        <el-dialog title="用户详情" :visible.sync="userFormVisible" @close="handleDialogClose"
                                   width="600px">
                            <el-form ref="userForm" :model="userForm" :rules="userFormRules" label-width="150px"
                                     label-position="right">
                                <el-form-item label="登录名" prop="loginName" required>
                                    <el-input v-model="userForm.loginName" placeholder="请输入登录名" :disabled="loginNameDisabled"
                                              style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="用户名" prop="nickName" required>
                                    <el-input v-model="userForm.nickName" placeholder="请输入用户真实姓名" style="width: 300px"
                                              :maxlength="100"></el-input>
                                </el-form-item>
                                <el-form-item label="手机" prop="telephone" required>
                                    <el-input v-model="userForm.telephone" placeholder="请输入手机号码" style="width: 300px"
                                              :maxlength="100"></el-input>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="userForm.remark" type="textarea" :rows="3"
                                              placeholder="请填写用户相关的描述" style="width: 300px" :maxlength="50"></el-input>
                                </el-form-item>

                                <el-form-item label-width="0" style="text-align: center">
                                    <el-button type="primary" @click="saveUser()" size="small">保存</el-button>
                                </el-form-item>
                            </el-form>

                        </el-dialog>

                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </template>
</div>
</body>
<script src="DeptList.js" type="text/javascript"></script>
</html>

